<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>核对收货地址</title>
<link href="${ctx }/style/common.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#main{margin: 0 auto;width: 960px;background-color: #ffffff;min-height: 450px;border: 1px solid #ccc;margin-top: 5px;}
#dglc{margin: 0 auto;width: 830px;margin-top: 35px;}
#address_title{margin: 0 auto;width: 830px;margin-top: 30px;}
#old_address_div{margin: 0 auto;width: 830px;color: #666666;margin-top: 10px;padding-bottom: 30px;}
#new_address_div{margin: 0 auto;width: 960px;margin-top: 10px;padding-bottom: 30px;font-size: 14px;color: #666666;display: none;}
.style15 {color: #FF6600}
.input{border: 1px solid #cccccc;-moz-border-radius: 3px;-webkit-border-radius: 3px;height: 18px;line-height: 17px;padding: 8px 5px 7px;width: 200px;font-size: 14px;}
</style>

<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
</head>
<body>

<%@include file="/commons/head.jsp"%>

<div id="main">
	<div id="dglc">
		<div style="float: right;"><img src="${ctx }/images/order/order_step2.png" border="0"/></div>
		<div style="float: right;padding-top: 5px;">订购流程:</div>
		<div style="clear: both;"></div>
	</div>
	<div id="address_title">
		<div style="float:left;font-size: 22px;color:#fd7602;font-family: 黑体;">确认收货地址</div>
		<div style="float: right;font-size: 12px;"><a href="${ctx }/customer/customerAction!listAddress.do" target="_blank">管理收货地址</a></div>
		<div style="clear: both;"></div>
	</div>
	
	<div id="old_address_div">
		<form action="${ctx }/customer/order!confirmAddress.do" id="address_confirm_form" name="address_confirm_form" method="post">
			<div style="padding: 0px 0px 0px 20px;" id="addressArrayDiv">
				<c:forEach items="${requestScope.addressList}" var="item" varStatus="status">
					<div style="padding: 10px 0px 5px 0px;">
						地址${status.count }：<input type="radio" name="addressChoose" value="${item.id }"/>${item.provinceInfo.name }省${item.cityInfo.name }市${item.address }&nbsp;&nbsp;收货人:${item.consignee }&nbsp;&nbsp;联系电话:${item.mobile }
					</div>
				</c:forEach>
			</div>
			<div  style="padding: 20px 0px 0px 60px;">
				<input type="hidden" id="orderId" name="orderId" value="${orderId }"/>
				<input type="button" onclick="confirm_address()" value="下一步" id="btn_next_old" 
					style="width:94px;height:34px;font-size: 14px;font-weight: bold;line-height: 34px;
					text-align: center;cursor: pointer;text-shadow: 0px 1px 0px #E9FDE5;"/>
			</div>
		 </form>
		 <div style="margin: 20px 0px 0px 60px;">
			<input type="button" name="btn_add_newaddress" id="btn_add_newaddress" value="使用新收货地址" onclick="chooseNewAddress()"
				style="width: 124px;height:34px;font-size: 14px;font-weight: bold;line-height: 34px;text-align: center;cursor: pointer;text-shadow: 0px 1px 0px #E9FDE5;"/>
		</div>
	</div>
	
   <div id="new_address_div">
		<form action="${ctx }/customer/order!confirm_address_new.do" id="new_address_form" name="new_address_form" method="post">
			<table width="910" border="0" cellpadding="5" cellspacing="10" align="center">
				<tr><td align="right"><span class="style15">*</span>收货人</td>
				<td><input name="consignee" id="customerName" maxlength="50" size="30" class="input"/></td></tr>
				<tr><td align="right"><span class="style15">*</span>收货地址</td>
				<td>
					<div style="border: 1px solid #ccc;float: left;padding: 7px;">
						 <select name="provinceInfoSelect" id="provinceInfoSelect" onchange="changeProvince()">
		                       <option value="">选择省份</option>
		                       <c:forEach items="${requestScope.provinceInfoList}" var="provinceInfo" varStatus="status">
					            	<option value="${ provinceInfo.id}">${ provinceInfo.name}</option>
					           </c:forEach>
		                   </select>
		            </div>
	                 <div style="border: 1px solid #ccc;float: left;margin-left: 5px;padding: 7px;">
	                   <select name="cityInfoSelect" id="cityInfoSelect">
	                       <option>选择县市</option>
	                   </select>
	                 </div>
	                  <div style="float: left;padding: 0px 0px 0px 5px;">
	                  	<input name="address" id="address" maxlength="100" class="input" style="width: 400px;"/>
	                  </div>
		              <div style="float: left;padding: 10px 0px 0px 5px;font-size: 12px;">(请正确填写区域及街道地址)</div>
				</td></tr>
				<tr>
					<td align="right"><span class="style15">*</span>收货人手机</td>
					<td>
						<input class="input" name="mobile" id="mobile" maxlength="20" size="30"/>
					</td>
				</tr>
				<tr>
					<td align="right">邮政编码</td>
					<td>
						<input class="input" name="zipCode" id="zipCode" maxlength="20" size="30"/>
					</td>
				</tr>
				<tr>
					<td><input type="hidden" id="orderId" name="orderId" value="${orderId }"/></td>
					<td>
						<span><input type="button" value="下一步" onclick="save_address()" id="btn_next_new" style="width:94px;height:34px;font-size: 14px;font-weight: bold;line-height: 34px;
							text-align: center;cursor: pointer;text-shadow: 0px 1px 0px #E9FDE5;"/></span>
						
						<span style="padding-left: 60px;">
							<input type="button" name="btn_old_address" id="btn_old_address" value="选择已有收货地址" onclick="chooseOldAddress()"
							style="width: 144px;height:34px;font-size: 14px;font-weight: bold;line-height: 34px;text-align: center;cursor: pointer;text-shadow: 0px 1px 0px #E9FDE5;"/>
						</span>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
</div>

<%@include file="/commons/foot.jsp" %>

<script  type="text/javascript">

$(function(){
	var size = ${requestScope.sizeOfaddressList};

	if(size > 0){
		$("#old_address_div").show();
		$("#new_address_div").hide();
	}else{
		$("#new_address_div").show();
		$("#old_address_div").hide();
	}
});

function confirm_address(){

	var isnull = 0;
	 $('input[name="addressChoose"]:checked').each(function(){
	  	 isnull++;
	  });
	  if(isnull == 0)
	  {
		   alert('请选择收货地址!');
		   return false;
	  }

	  $("#address_confirm_form").submit();
}

function chooseNewAddress(){

	var size = ${requestScope.sizeOfaddressList};

	if(size >= 5){
		alert("不允许添加新收货地址，每个会员最多允许添加五个收货地址。");
		return false;
	}
	
	$("#new_address_div").toggle();
	$("#old_address_div").toggle();
}

function chooseOldAddress(){

	var size = ${requestScope.sizeOfaddressList};

	if(size < 1){
		alert("未添加过收货地址。");
		return false;
	}
	
	$("#new_address_div").toggle();
	$("#old_address_div").toggle();

}

function save_address(){

	var customerName = $("#customerName").val();
	if( customerName == ""){
		 alert("请填写收货人姓名。");
		 return false;
	}
    
	var province = $("#provinceInfoSelect").val();
	if( province == ""){
		 alert("请选择所在省。");
		 return false;
	}

	var city = $("#cityInfoSelect").val();
	if( city == ""){
		 alert("请选择所在县市。");
		 return false;
	}
	
	var address = $.trim($("#address").val());
	if( address  ==  ""){
		$("#address").focus();
		 alert("请填写区域及街道地址。");
		 return false;
	}

    var mobile = $("#mobile").val();
	if(!checkMobilePhone(mobile)){
		$("#mobile").focus();
		alert("请正确收货人手机号码。");
		return false;
	}

	var zipCode = $.trim($("#zipCode").val());
	var zipCodeReg = /^[1-9][0-9]{5}$/;
	if( zipCode != "" && !zipCodeReg.test(zipCode) ){
		$("#zipCode").focus();
		 alert("邮政编码填写不正确。");
		 return false;
	}

	if(window.confirm("确认提交？")){
		$("#new_address_form").submit();	
	}else{
		return false;
	}
}


</script>

</body>
</html>